<template>
    <div class="Dashuse" v-loading="loading">
        <el-row :gutter="20">
            <el-col :span="3" v-for="(item,index) in ModuleTreeList" :key="index">
                <router-link to="/LevHome">
                    <div class="grid-content bg-purple" @click="ClickModuleTreeList(item)">
                        <p>{{item.moduleName}}</p>
                    </div>
                </router-link>
            </el-col>
        </el-row>
        <router-view ref="LevHomeRef"></router-view>
    </div>
</template>
<script>
import { GetModuleTreeList } from '@/api/index';
import LevHome from '../../module/LevThrPage/page/LevHome';
import bus from '@/components/common/bus';
export default {
    props: ['tabGetsList'],
    name: 'Dashuse',
    data() {
        return {
            ModuleTreeList: [],
            loading: true,
            ListtoTabGets: []
        };
    },
    computed: {},
    created() {
        //获取一级菜单
        GetModuleTreeList(123).then(({ data }) => {
            this.loading = false;
            this.ModuleTreeList = data;
        });
    },
    mounted() {},
    methods: {
        //点击跳转并且在头部展示标签页
        ClickModuleTreeList(item) {
            this.ListtoTabGets.push(item);
            let listarr = Array.from(new Set(this.ListtoTabGets));
            this.$emit('update:tabGetsList', listarr);
            setTimeout(() => {
                bus.$emit('up', item.childNode);
            }, 300);
        }
    },
    components: {
        LevHome
    }
};
</script>

<style lang="less" scoped>
.Dashuse {
    width: 100%;
    height: 100%;
}
.el-row {
    width: 100%;
    padding-left: 50px;
    box-sizing: border-box;
}
.el-row > div {
    background: #fff;
    line-height: 150px;
    text-align: center;
    margin: 15px;
    cursor: pointer;
    a {
        color: #000;
    }
}
.on {
    display: block;
}
</style>